<template>
  <view class="joinexamination">
    <view class="head" v-show="isShow == 1">
      <u-navbar
        leftText="返回"
        title="PDF教程"
        @leftClick="back"
        @rightClick="switchover"
      >
        <view class="u-nav-slot" slot="left">
          <u-icon name="arrow-left" size="19"></u-icon>
        </view>
        <view class="u-nav-slot" slot="right">
          <view class="img">
            <image src="../../static/operation/sousuo.png" mode=""></image>
          </view>
        </view>
      </u-navbar>
    </view>
    <view class="head" v-show="isShow == 2">
      <u-navbar :safeAreaInsetTop="false" @rightClick="cancel">
        <view class="u-nav-slot" slot="left">
          <view class="input">
            <u--input
              placeholder="搜索"
              border="surround"
              prefixIcon="search"
              v-model="value"
              @change="change"
              style="background-color: #f6f6f6; border-radius: 30rpx"
            ></u--input>
          </view>
        </view>
        <view class="u-nav-slot" slot="right">
          <view class="cancel">
            <text>取消</text>
          </view>
        </view>
      </u-navbar>
    </view>
    <view class="content">
      <view class="content-topic" v-for="item in list" :key="item.id">
        <view class="topic-title">
          <text>财务部培训</text>
        </view>
        <view class="topic-content">
          <text class="one">所属类别</text>
          <text class="two">{{ item.type }}</text>
        </view>
        <view class="topic-content">
          <text class="one">备注</text>
          <text class="two">{{ item.remark }}</text>
        </view>
        <view class="btn">
          <u-button @click="study" type="primary" text="进入学习"></u-button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          id: 1,
          type: "操作规程培训",
          remark: "无",
        },
        {
          id: 2,
          type: "操作规程培训",
          remark: "无",
        },
        {
          id: 3,
          type: "操作规程培训",
          remark: "无",
        },
      ],
      isShow: 1,
      value: "",
    };
  },
  methods: {
    back() {
      uni.navigateBack();
    },
    switchover() {
      this.isShow = 2;
    },
    cancel() {
      this.isShow = 1;
    },
    change(e) {
      console.log("change", e);
    },
    study() {
      uni.navigateTo({
        url: "/pages/intothestudy/intothestudy",
      });
    },
  },
};
</script>

<style lang="scss">
.joinexamination {
  width: 100%;
  height: 100%;
  background-color: #f6f6f6;
  .head {
    height: 100rpx;
    background-color: #fff;
    .u-count-down {
      color: #1989fa !important;
    }
    .input {
      margin-left: 40rpx;
      width: 547rpx;
      height: 60rpx;
      border-radius: 30rpx;
      /deep/.u--input {
        width: 547rpx;
        height: 60rpx;
        border-radius: 30rpx;
        background-color: #f6f6f6;
      }
    }
    .img {
      width: 36rpx;
      height: 36rpx;
      image {
        width: 100%;
        height: 100%;
      }
    }
    .cancel {
      margin-right: 40rpx;
      font-size: 28rpx;
      color: #666666;
    }
  }
  .content {
    width: 100%;
    padding: 40rpx 24rpx 60rpx;
    box-sizing: border-box;
    .content-topic {
      width: 702rpx;
      padding: 32rpx 48rpx;
      box-sizing: border-box;
      background-color: #fff;
      border-radius: 16rpx;
      margin-bottom: 40rpx;
      .topic-title {
        width: 100%;
        height: 41rpx;
        line-height: 41rpx;
        color: #666666;
        font-size: 28rpx;
        text-align: center;
        margin-bottom: 24rpx;
      }
      .topic-content {
        width: 100%;
        // height: 420rpx;
        height: 92rpx;
        line-height: 92rpx;
        display: flex;
        justify-content: space-between;
        .one {
          color: #999999;
          font-size: 28rpx;
        }
        .two {
          color: #666666;
          font-size: 28rpx;
        }
      }
    }
    .btn {
      width: 100%;
      .u-button {
        border-radius: 16rpx;
      }
    }
  }
}
</style>
